.content {
  overflow: scroll;
  height: 100%;
}
.userInfo {
  height: 100%;
  background-color: #f1f1f1;
}
van-sticky {
  position: fixed !important;
  width: 100%;
  z-index: 99;
}
.van-tabs__content {
  box-sizing: border-box;
  padding: 58px 10px 110px;
  background-color: #f1f1f1;
}
.nav-class .van-ellipsis {
  font-size: 36rpx;
}
.normal-punch-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 40rpx;
  background-color: #fff;
  padding-bottom: 100rpx;
  .punch-card-logo {
    position: relative;
    width: 140rpx;
    height: 140rpx;
    margin-top: 100rpx;
    .main-logo {
      width: 140rpx;
      height: 140rpx;
    }
    .side-logo {
      position: absolute;
      width: 70rpx;
      height: 70rpx;
      right: 0;
      bottom: 0;
      background-color: #fff;
      border-radius: 50%;
      img {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
  .punch-card-title {
    font-size: 34rpx;
    margin-top: 26rpx;
  }
  .punch-card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300rpx;
    height: 300rpx;
    margin-top: 60rpx;
    margin-bottom: 20rpx;
    border-radius: 50%;
    color: #fff;
    font-size: 36rpx;
    .punch-card-button-desc {
      font-size: 46rpx;
    }
  }
  .punch-card-position {
    display: flex;
    padding: 0 40rpx;
    margin-top: 40rpx;
    text-align: center;
    img {
      width: 40px;
      height: 40rpx;
    }
  }
  .punch-card-tips {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-top: 100rpx;
    padding: 0 20rpx;
    .work {
      flex: 1;
      margin-right: 20rpx;
      border-radius: 20rpx;
      padding: 24rpx;
      background-color: rgb(224, 224, 224);
      .work-desc {
        display: flex;
        flex-direction: column;
        font-size: 32rpx;
        .card-info {
          display: flex;
          image {
            width: 40rpx;
            height: 40rpx;
          }
          .info-text {
            margin-left: 10rpx;
          }
        }
        .card-reload {
          color: #259b24;
        }
      }
    }
    .get-off-work {
      flex: 1;
      border-radius: 20rpx;
      padding: 24rpx;
      background-color: rgb(224, 224, 224);
      .get-off-work-desc {
        display: flex;
        flex-direction: column;
        font-size: 32rpx;
        .card-info {
          display: flex;
          image {
            width: 40rpx;
            height: 40rpx;
          }
          .info-text {
            margin-left: 10rpx;
          }
        }
        .card-reload {
          color: #259b24;
        }
      }
    }
  }
}
.normal-punch-card-active {
  .punch-card-title {
    color: #259b24;
  }
  .punch-card-button {
    background: #259b24; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to top,
      #259b24,
      #4af748
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to top,
      #259b24,
      #4af748
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 0 10px #4af748;
    .punch-card-time {
      opacity: 0.7;
    }
  }
}

.normal-punch-card-default {
  .punch-card-title {
    color: #dbdbdb;
  }
  .punch-card-button {
    background: #dbdbdb;
    box-shadow: 0 0 10px #dbdbdb;
    .punch-card-time {
      opacity: 1;
    }
  }
}

.field-clock-punch-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 40rpx;
  background-color: #fff;
  padding-bottom: 60rpx;
  .punch-card-logo {
    margin-top: 100rpx;
    .main-logo {
      width: 140rpx;
      height: 140rpx;
    }
  }
  .punch-card-title {
    font-size: 34rpx;
    margin-top: 26rpx;
    color: #259b24;
  }
  .visiting-information {
    width: 300rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin-top: 40rpx;
    font-size: 30rpx;
    text-align: center;
    background: linear-gradient(to top, #259b24, #33af31);
    box-shadow: 0 0 10px #33af31;
    color: #fff;
    border-radius: 20rpx;
  }
  .punch-card-area {
    margin-top: 20rpx;
    padding: 0 40rpx;
    text-align: center;
    font-size: 30rpx;
    margin-top: 40rpx;
    img {
      width: 40rpx;
      height: 40rpx;
      margin: 0 10rpx -8rpx 10rpx;
    }
  }
  .punch-card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300rpx;
    height: 300rpx;
    margin-top: 60rpx;
    margin-bottom: 20rpx;
    border-radius: 50%;
    color: #fff;
    font-size: 36rpx;
    .punch-card-button-desc {
      font-size: 46rpx;
    }
    background: #259b24; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to top,
      #259b24,
      #4af748
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to top,
      #259b24,
      #4af748
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: 0 0 10px #4af748;
    .punch-card-time {
      opacity: 0.7;
    }
  }
  .punch-card-area-tips {
    margin-top: 20rpx;
    color: #999;
  }
}
.dialog-content {
  padding: 20rpx 40rpx;
  .visitingInformationArea {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    // padding: 20rpx 40rpx;
    box-shadow: inset 0 0 10px #dbdbdb;
    border-radius: 10px;
  }
}

.history-list {
  box-sizing: border-box;
  width: 100%;
  padding: 0 40rpx;
  margin-top: 60rpx;
  p {
    text-align: right;
    width: 100%;
    font-size: 30rpx;
    color: #33af31;
  }
}

#normal-punch-card-text-default{
  color: #8f8f8f !important;
}
#normal-punch-card-text-active{
  color: #259b24 !important;
}